<template>
	<view class="root" v-if="agreements.length">
		<template v-if="needAgreements">
			<view class="content">
				<label class="checkbox-box">
					<fui-checkbox :scaleRatio="0.8" :checked="isAgree" @change="setAgree" style="margin-right: 6px;"></fui-checkbox>
				</label>
				<text>阅读并同意</text>
				<text class="agreement" space="nbsp" @click="navigateTo(agreements[0])">《{{agreements[0].title}}》</text>
				<text> 和 </text>
				<text class="agreement" space="nbsp" @click="navigateTo(agreements[1])">《{{agreements[1].title}}》</text>
			</view>
		</template>
		<!-- 弹出式 -->
		<uni-popup v-if="needAgreements || needPopupAgreements" ref="popupAgreementRef" type="center">
			<uni-popup-dialog confirmText="同意" @confirm="popupConfirm" @close="popupClose" cancelText="取消">
				<view class="content">
					<text>阅读并同意</text>
					<text class="agreement" space="nbsp" @click="navigateTo(agreements[0])">《{{agreements[0].title}}》</text>
					<text> 和 </text>
					<text class="agreement" space="nbsp" @click="navigateTo(agreements[1])">《{{agreements[1].title}}》</text>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup name="uni-id-agreements">
	/**
	 * @name 用户服务协议和隐私政策条款组件
	 */
	import { ref, computed, nextTick } from 'vue'
	import config from '@/config/config.js'
	// * 传参参数
	const props = defineProps({
		// * 显示场景(传递是config中scope所传递的值)
		scope: {
			type: String,
			require: true,
			default: () => 'register'
		},
	})

	let retryFun = () => console.log('未定义') // 传递过来的事件
	const isAgree = ref(false) // 复选框选中状态
	const needAgreements = ref(true) // 组件显示状态
	const needPopupAgreements = ref(false) //弹出层显示状态


	// * 用于判断用户传递的scope是否在config下的scope配置中
	needAgreements.value = computed(() => (config?.agreements?.scope || []).includes(props.scope))


	// * 用于渲染用户协议
	const agreements = computed(() => {
		if (!config.agreements) {
			return []
		}
		let { serviceUrl, privacyUrl } = config.agreements
		return [{
				url: serviceUrl,
				title: "用户协议"
			},
			{
				url: privacyUrl,
				title: "隐私政策"
			}
		]
	})

	// *  如果未选中复选框时，暴露给父组件打开弹出层的方法
	const popupAgreementRef = ref(null)
	const popup = (Fun) => {
		needPopupAgreements.value = true
		// 获取到传递的过滤的方法进行赋值
		nextTick(() => {
			if (Fun) retryFun = Fun
			// 打开弹出层
			popupAgreementRef.value.open()
		})
	}

	// * 弹出层确认按钮事件
	const popupConfirm = () => {
		// 确认后自动勾选复选框
		isAgree.value = true
		// 调用传递过来的事件
		retryFun()
	}
	// * 取消按钮
	const popupClose = () => {
		uni.$emit('popupClose',false)
	}

	// 点击协议连接事件
	const navigateTo = ({ url, title }) => {
		// 注意如路由有变动，需要手动修改
		uni.navigateTo({ url: url});
	}


	// 用于暴露事件判断
	const emit = defineEmits(['setAgree', 'close'])
	const setAgree = () => {
		isAgree.value = !isAgree.value
		// emit('setAgree', isAgree.value)
	}

	// * 统一暴露属性
	defineExpose({ popup, needAgreements, isAgree, setAgree })
</script>

<style lang="scss" scoped>
	/* #ifndef APP */
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}

	/* #endif */
	.root {
		width: 100%;
		flex-direction: row;
		font-size: 28rpx;
		color: #8a8f8b;
		justify-content: center !important;
		display: flex;
	}

	.item {
		flex-direction: row;
	}

	.text {
		line-height: 16px;
	}

	.agreement {
		color: #04498c;
		cursor: pointer;
	}

	.checkbox-box ::v-deep .uni-checkbox-input {
		border-radius: 100%;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.root ::v-deep .uni-popup__error {
		color: #333333;
	}
</style>